<div class="flex flex-col gap-4 sm:flex-row">
  <%= render 'menu' %>
  <div class="p-4 grow card">
    <div class="flex flex-col gap-4 sm:flex-row">
      <div class="grow">
        <%= form_for @user, url: setting_path, method: :put, html: { enctype: "multipart/form-data" } do |f| %>
            <%= render "shared/error_messages", target: @user %>
              <input type="hidden" name="by" value="reward">
              <% User::REWARD_FIELDS.each do |field| %>
                <div class="flex flex-col form-group-reward-field-<%= field %> mb-4">
                  <label class="form-label"><%= Profile.reward_field_label(field) %></label>
                  <input class="p-2 border rounded shadow-sm hover:bg-gray-50 dark:hover:bg-gray-800 dark:border dark:border-gray-800" type="file" name="user_reward[<%= field %>]" id="user_reward_<%= field %>">
                  <div class="form-text">
                    <% if field == :alipay %>
                      打开支付宝客户端：右上角“+” -> 我要收款 -> 设定金额 -> 保存二维码图片
                    <% elsif field == :wechat %>
                      打开微信手机客户端：右上角“+” -> 收付款 -> 我要收款 -> 保存二维码图片
                    <% end %>
                  </div>
                </div>
                <% if @user.reward_field(field) %>
                  <div class="form-group">
                    <div class="reward-image">
                      <img src="<%= @user.reward_field(field) %>" >
                    </div>
                  </div>
                <% end %>
              <% end %>
              <div class="form-actions hide-ios">
                <button type="submit" class="btn btn-primary" data-disable-with="<%= t("common.saving") %>"><%= t("users.update_profile")%></button>
              </div>
            <% end %>
          </div>
          <div class="w-full sm:w-1/3 shrink-0">
            <div class="markdown">
              <%= markdown("### :gift: 关于打赏\n\n

              打赏功能为了鼓励分享而设计。

              上传你的微信、支付宝 **收款二维码**，之后打赏按钮将会出现在 “个人主页” 和 “文章末尾” 显示。
              ") %>
            </div>
          </div>
    </div>
  </div>
</div>
</div>
